<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>景区展示</title>
    <script src="/js/vue.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <!--    搜索    -->
        <el-row>
            <!--一行分为4列-->
            <el-col :span="3">
                <el-input
                        size="mini"
                        placeholder="请输入景区名称"
                        v-model="searchForm.name">
                </el-input>
            </el-col>
            <el-col :span="3">
                <el-input
                        size="mini"
                        placeholder="请输入景区级别代码"
                        v-model="searchForm.jbcode">
                </el-input>
            </el-col>
            <el-col :span="2">
                &nbsp;&nbsp;<el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="success" size="mini" icon="el-icon-plus" @click="handleAdd">添加</el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refresh">刷新</el-button>
            </el-col>
            <el-col :span="12">
                <div></div>
            </el-col>
        </el-row>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
        >
<!--            <el-table-column-->
<!--                    fixed-->
<!--                    prop="code"-->
<!--                    label="景区代码"-->
<!--                    width="80">-->
<!--            </el-table-column>-->
            <el-table-column
                    prop="name"
                    label="景区名称"
                    width="80">
            </el-table-column>
            <el-table-column label="封面" width="160">
                <template slot-scope="scope">
                    <el-image
                            style="width: 90px; height: 66px"
                            :src="scope.row.scover"
                    ></el-image>
                </template>
            </el-table-column>
<!--            :formatter="getStatus3"-->
            <el-table-column width="180"
                             prop="themeName"
                             label="主题分类">
            </el-table-column>
<!--            :formatter="getStatus4"-->
            <el-table-column
                    prop="tdsName"
                    label="时节"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="jbcode"
                    label="级别代码"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="yytime"
                    label="营业时间"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="areaName"
                    label="地域代码 "
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="saddress"
                    label="景区地址"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="taddress"
                    label="购票地址"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="lat"
                    label="维度"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="lng"
                    label="经度"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="mobile"
                    label="手机"
                    width="210">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="210">
            </el-table-column>
            <el-table-column
                    prop="snav"
                    label="导航图"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="summary"
                    label="景区简介"
                    width="400">
            </el-table-column>
            <el-table-column
                    prop="sintroduction"
                    label="景点介绍"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="straffic"
                    label="交通指南"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="sprotocol"
                    label="协议"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="isline"
                    label="是否上线"
                    width="80"
                    :formatter="getStatus">
            </el-table-column>
            <el-table-column
                    prop="weight"
                    label="推荐度"
                    width="80"
                    :formatter="getStatus1">
            </el-table-column>
            <el-table-column
                    prop="istodayshow"
                    label="是否web显示"
                    width="80"
                    :formatter="getStatus2">
            </el-table-column>
            <el-table-column
                    prop="oprice"
                    label="最优折扣价对应的门市价"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="dprice"
                    label="最优折扣价"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="snums"
                    label="已消费门票数"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="onums"
                    label="已下订单数"
                    width="80">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="180"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页功能-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[6, 12, 15, 21]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--    更新或添加的From表单    -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="景区代码" :label-width="formLabelWidth">
                    <el-input v-model="form.code" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="景区名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="封面" :label-width="formLabelWidth">
                <!--上传图片  -->
                <el-upload
                        class="avatar-uploader"
                        action="/scenic/uploadFile"
                        name="file1"
                        :show-file-list="false"
                        :on-success="handleFileSuccess"
                        :before-upload="beforeFileUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </el-form-item>
                <el-form-item label="主题" :label-width="formLabelWidth">
                    <template>
                        <el-select v-model="form.themecode" placeholder="主题">
                            <el-option
                                    v-for="item in options2"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="时节" :label-width="formLabelWidth">
                    <template>
                        <el-select v-model="form.seasoncode" placeholder="时节代码">
                            <el-option
                                    v-for="item in options1"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="级别" :label-width="formLabelWidth">
                    <template>
                        <el-select v-model="form.jbcode" placeholder="级别代码">
                            <el-option
                                    v-for="item in options3"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="取票位置" :label-width="formLabelWidth">
                    <el-input v-model="form.taddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="营业时间" :label-width="formLabelWidth">
                    <el-input v-model="form.yytime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地域" :label-width="formLabelWidth">
                    <template>
                        <el-select v-model="form.areacode" placeholder="地域代码">
                            <el-option
                                    v-for="item in options4"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="交通规则" :label-width="formLabelWidth">
                    <el-input v-model="form.straffic" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="景区地址" :label-width="formLabelWidth">
                    <el-input v-model="form.saddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="景区简介" :label-width="formLabelWidth">
                    <el-input v-model="form.summary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="景点介绍" :label-width="formLabelWidth">
                    <el-input v-model="form.sintroduction" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="推荐度" :label-width="formLabelWidth">
                    <el-input v-model="form.weight" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdate">确 定</el-button>
            </div>
        </el-dialog>
    </template>
</div>
<script>
    // js代码
    var vue = new Vue({
        el: '#app',
        data() {   //存放使用的所有属性数据
            return { //方便编写表单校验
                imageUrl:'',
                tableData: [],//表格数据
                currentPage: 1,//第几页
                pageSize: 6,//每页显示数量
                total: 10,//总数量
                searchForm: {name: '', jbcode: ''},//封装查询对象
                dialogFormVisible: false,//是否显示对话框
                title: '景点添加',//默认显示
                form: {
                    code: '',
                    name: '',
                    themecode: '',
                    seasoncode: '',
                    jbcode: '',
                    yytime: '',
                    areacode: '',
                    summary: '',
                    sintroduction: '',
                    straffic: '',
                    isline: 0,
                    weight: '',
                    istodayshow: 0,
                    snums: '',
                    onums: ''
                },//from表单
                  //时节
                options1: [],
                //添加主题
                options2: [],
                //添加级别
                options3: [
                    {
                        "value": "AAAAA",
                        "label": "五级景区",
                    },
                    {
                        "value": "AAAA",
                        "label": "四级景区",
                    },
                    {
                        "value": "unknown",
                        "label": "四级以下",
                    },
                ],
                //添加主题
                options4: [],
                formLabelWidth: '120px',//label的宽度
                rules: {
                    name: [{required: true, message: '请输入景区名称', trigger: 'blur'}],
                    // province: [{required: true, message: '请输入部门位置', trigger: 'blur'}],
                }
            }
        },
        created: function () { //页面初始化时，需要执行的方法
            //调用加载数据方法
            this.loadData();
            this.queryTheme();
            this.querySceson();
            this.queryArea();
        },
        methods: { //存放所有使用的方法（函数）
            //封装请求数据的方法
            loadData() {
                //定义_this = this
                var _this = this
                //axios向后台发请求
                axios.post('/scenic/queryPage',//请求的url
                    {
                        "pageNo": this.currentPage,
                        "pageSize": this.pageSize,
                        "data": {"name": this.searchForm.name, "jbcode": this.searchForm.jbcode}
                    }//请求的参数 json格式
                )
                    .then(function (response) {//回调函数
                        //前端控制台打印  response 是 JSON对象
                        console.log(response);
                        console.log(JSON.stringify(response));
                        //response获取后端数据是一定要加data 相当于从相应的body中获取
                        if (response.data.code == 200) {
                            //这里面直接写this县东港与axios对象 不是vue
                            //this.tableData = response.data.data.list;  X错误的
                            _this.tableData = response.data.data.list;
                            _this.total = response.data.data.total;
                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });
            },
            //查询主题
            queryTheme() {
                let _this = this;
                //使用axios向后台发请求
                axios.post('/theme/sysPage',
                    {
                        "pageNo": 1, "pageSize": 300,
                        "data": {"name": '', "isvalid": ''}
                    })
                    .then(function (response) {
                        if (response.data.code == 200) {
                            let list = response.data.data.list;
                            for (let i = 0; i < list.length; i++) {
                                let a = {
                                    "value": list[i].code,
                                    "label": list[i].name,
                                }
                                _this.options2.push(a);
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //地域
            queryArea(){
                let _this = this;
                //使用axios向后台发请求
                axios.post('/tDicArea/queryPage',
                    {
                        "pageNo": 1, "pageSize": 300,
                        "data": {"name": ''}
                    })
                    .then(function (response) {
                        if (response.data.code == 200) {
                            let list = response.data.data.list;
                            for (let i = 0; i < list.length; i++) {
                                let a = {
                                    "value": list[i].code,
                                    "label": list[i].name,
                                }
                                _this.options4.push(a);
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //时令
            querySceson(){
                let _this = this;
                //使用axios向后台发请求
                axios.post('/season/queryPage',
                    {
                        "pageNo": 1, "pageSize": 300,
                        "data": {"name": '', "isedit": '', "isvalid": '', "sortno": '', "description": ''}
                    })
                    .then(function (response) {
                        if (response.data.code == 200) {
                            let list = response.data.data.list;
                            for (let i = 0; i < list.length; i++) {
                                let a = {
                                    "value": list[i].code,
                                    "label": list[i].name,
                                }
                                _this.options1.push(a);
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //每页数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                //调用加载数据方法
                this.loadData();
            },
            //页码发生变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                //调用加载数据方法
                this.loadData();
            },
            //刷新
            refresh() {
                //原始js重新请求
                location.reload();
            },
            //搜索方法
            search() {
                this.loadData();
            },
            //跳转更新
            handleEdit(row) {
                console.log(row);
                // alert(index+","+JSON.stringify(row))
                this.dialogFormVisible = true;
                //让title变化
                this.title = '景区更新';
                this.imageUrl = row.scover;
                //给表单赋值
                this.form = row;
            },
            //跳转添加
            handleAdd() {
                this.imageUrl="";
                //让对话框显示
                this.dialogFormVisible = true;
                this.title = '景区添加';
                this.form = {};
            },
            //真正的添加或更新
            addOrUpdate() {
                var uri = "/scenic/add";
                if (this.title == '景区更新') {
                    uri = "/scenic/update";
                }
                var _this = this
                //axios向后台发请求
                axios.post(uri,//请求的url
                    this.form)//请求的参数 json格式
                    .then(function (response) {//回调函数
                        //前端控制台打印  response 是 JSON对象
                        console.log(response);
                        console.log(JSON.stringify(response));
                        //response获取后端数据是一定要加data 相当于从相应的body中获取
                        if (response.data.code == 200) {
                            _this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            _this.dialogFormVisible = false;
                            _this.loadData();
                        } else {
                            _this.$message.error('错了哦，这是一条错误消息');
                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });
            },
            //处理删除
            handleDelete(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    var _this = this
                    axios.delete('/scenic/delete/' + row.id)
                        .then(function (response) {
                            if (response.data.code == 200) {
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                _this.dialogFormVisible = false;
                                _this.loadData();
                            } else {
                                _this.$message("操作失败")
                            }
                        });
                }).catch(function (error) {

                });
            },
            //处理文件成功后的处理方法
            handleFileSuccess(res, file) {
                //回显上传图片
                this.imageUrl = URL.createObjectURL(file.raw);
                this.form.scover=file.response.data.filePath;
            },
            //处理文件成功前的处理方法
            beforeFileUpload(file) {
                const FILE_NAME = file.name;
                if (
                    FILE_NAME.substring(FILE_NAME.lastIndexOf(".")) !== ".bmp" &&
                    FILE_NAME.substring(FILE_NAME.lastIndexOf(".")) !== ".jpg" &&
                    FILE_NAME.substring(FILE_NAME.lastIndexOf(".")) !== ".png"
                ) {
                    this.$message.warning("仅支持.bmp.jpg.png文件");
                    return false;
                }
                // const isJPG = file.type === 'image/jpeg';
                const isLt6M = file.size / 1024 / 1024 < 6;
                // if (!isJPG) {
                //     this.$message.error('上传头像图片只能是 JPG 格式!');
                // }
                if (isLt6M) {
                    this.file = file;
                    return true;
                }
                this.$message.warning("请上传不超过6M的文件.");
                return false;
            },  //用户性别 把状态数字,转换成字符
            getStatus(row, column, cellValue, index) {
                return cellValue == 1 ? "上线" : "不上线";
            },
            //用户性别 把状态数字,转换成字符
            getStatus1(row, column, cellValue, index) {
                return cellValue == 0 ? "推荐" : "不推荐";
            },
            getStatus2(row, column, cellValue, index) {
                return cellValue == 1 ? "显示" : "不显示";
            },
        }
    });
</script>
</body>
</html>